<template>
  <div class="echarts-outer-wrapper width-620">
    <Title
      title="本年税费收入(分行业)"
      time="4"
      timePosition="left"
      dw="单位：亿元"
    ></Title>
    <!-- <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          v-for="(item,index) in incomeTableList"
          :key="index"
          :class="{'select':incomeIndex == index}"
          @click="incomeTabItem(item,index)"
        >{{ item }}</div>
      </div>
    </div>-->
    <div v-show="!QJShow">
      <div ref="echart" style="height: 416px"></div>
    </div>
    <div @click="viewRecords($event)" v-if="QJShow">
      <vue-seamless-scroll
        :data="swiperListArr"
        :class-option="classOptionArr"
        class="table-content-income"
      >
        <div
          class="list-item"
          v-for="(item, index) in swiperListArr"
          :key="index"
        >
          <div
            class="city-name button-wrapper"
            :style="{ backgroundColor: item.bgcColor }"
            :data="JSON.stringify(item)"
          >
            <div class="name">{{ item.zgswjgmc }}</div>
          </div>
          <div class="detail-wrapper">
            <div class="label">本月累计税费收入</div>
            <div class="value">{{ item.yljje }}</div>
            <div class="label">本年累计税费收入</div>
            <div class="value">{{ item.nljje }}</div>
          </div>
        </div>
      </vue-seamless-scroll>
      <div class="echart-detail-modal" v-show="incomeModalShow">
        <div class="title">{{ incomeModalTitle }}</div>
        <div class="close" @click="incomeLeaver">X</div>
        <div class="detail-list-wrapper">
          <div
            class="detail-list"
            v-for="(item, index) in incomeModalList"
            :key="index"
          >
            <div class="item hang">{{ item.zgswksmc }}</div>
            <div class="item name">本月累计</div>
            <div class="item money">{{ item.yljje }}</div>
            <div class="item name">本年累计</div>
            <div class="item money">{{ item.nljje }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import * as echartOption from "@/components/echart-axis";
import * as echarts from "echarts";

export default {
  name: "ItemLeftMiddle",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      yearData: null,
      EchartData: null,
      incomeIndex: 0,
      incomeTableList: ["行业", "区局"],
      QJShow: false,
      demoData: [
        {
          name: "未来15日\n场地预约率",
          unit: "%",
          value: 60,
        },
      ],
      leftBomShow: false,
      colorList: [
        "#e46119",
        "#275eb4",
        "#a6741c",
        "#0b379c",
        "#2a7d39",
        "#554e05",
        "#3131a5",
        "#246897",
        "#e48819",
        "#e43129",
        "#e57a19",
        "#e12619",
        "#e43799",
        "#e28d19",
        "#e462e9",
        "#e413d9",
        "#e4a3c9",
        "#e12119",
      ],
      swiperListArr: [],
      classOptionArr: {
        limitMoveNum: 1, // 开启无缝滚动的数据量
        singleHeight: 30,
        waitTime: 1,
        step: 0.5,
        hoverStop: true,
        openWatch: true,
      },
      incomeModalShow: false,
      incomeModalTitle: "",
      incomeModalList: [{}, {}, {}, {}, {}, {}],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearData = year;
  },
  mounted() {
    this.echart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsSrcxService/bnsfsrybQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
          tjnd: this.yearData,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      let data = res.data.sjjgList;
      this.swiperListArr = data;
      this.swiperListArr.forEach((item, index) => {
        this.$set(item, "bgcColor", this.colorList[index]);
      });
      this.industryCharData = res.data.hyList;
      this.incomeTabItem("行业", 0);
    });
  },
  methods: {
    incomeTabItem(item, index) {
      this.incomeIndex = index;
      this.incomeModalShow = false;
      this.$nextTick(() => {
        if (item === "行业") {
          this.rightChartData();
          this.QJShow = false;
        } else {
          // 区局
          this.ajax({
            url: "/dpzsSrcxService/bnsfsrybQuery",
            method: "post",
            data: {
              param: {
                tjny: this.prevDate,
                tjnd: this.yearData,
              },
            },
          }).then((res) => {
            res = res.data;
            if (res.rtnCode !== "200") {
              this.$message.error(res.rtnMsg);
              return;
            }
            let data = res.data.swjgList;
            let formateData = [];
            let nameArray = [];
            for (let item of data) {
              if (nameArray.indexOf(item.zgswjgmc) == -1) {
                nameArray.push(item.zgswjgmc);
              }
            }
            for (let item of nameArray) {
              let filterData = data.filter((fil) => {
                return fil.zgswjgmc === item;
              });
              formateData.push({
                ...filterData[0],
                children: filterData,
              });
            }
            this.swiperListArr = formateData;
            this.swiperListArr.forEach((item, index) => {
              this.$set(item, "bgcColor", this.colorList[index]);
            });
          });
          this.QJShow = true;
        }
      });
    },
    rightChartData() {
      const category = this.industryCharData.map((item) => {
        return {
          name: item.hymc,
          value: item.nljje,
        };
      }); // 类别
      const total = 360; // 数据总数
      const a = ["20%", "40%", "60%", "80%", "100%"];
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      const ydata = category.map((v) => v.name);
      let option = {
        grid: echartOption.echartGrid({
          left: 60,
          right: 100,
          containLabel: false,
        }),
        dataZoom: echartOption.dataZoomRight([0], {
          endValue: 7,
        }),
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            color: "#ABBFE3",
          },
          axisTick: echartOption.xAxisTick,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: ydata,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                verticalAlign: "bottom",
                color: "#FFFFFF",
                fontSize: 14,
                fontFamily: "Microsoft YaHei",
                align: "left",
                padding: [0, 0, 9, 10],
              },
              formatter: (name, index) => {
                return `${name}`;
              },
            },
            offset: 0,
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 14,
            barCateGoryGap: 20,
            legendHoverLink: false,
            silent: true,
            cursor: "default",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: function (params) {
                  return echartOption.ColorOne(params);
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}",
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: category,
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      };
      this.echart.setOption(option);
    },
    viewRecords(e) {
      const path = e.path || (e.composedPath && e.composedPath());
      let target = path.filter((r) => /button-wrapper/.test(r.className));
      if (target.length) target = target[0];
      else return;
      const data = JSON.parse(target.getAttribute("data")); // 单项数据详情
      // 跳转详情页面
      this.incomeModalTitle = data.cityName;
      this.incomeModalList = data.xjjgList;
      this.incomeModalShow = true;
    },
    incomeLeaver() {
      this.incomeModalShow = false;
      this.incomeModalTitle = "";
    },
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 616px;
  height: 476px;
}
.table-content-income {
  height: 344px;
  overflow: hidden;
  .list-item {
    width: 540px;
    height: 45px;
    background-image: url(~@/assets/images/bg-item-2.png);
    background-size: 100% 100%;
    margin: 6px auto;
    display: flex;
    align-items: center;
    .city-name {
      margin-left: 20px;
      width: 74px;
      height: 28px;
      background-color: #275eb4;
      transform: skewX(-30deg);
      cursor: pointer;
      .name {
        width: 74px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #ffffff;
        top: 0;
        left: 0;
        z-index: 1;
        transform: skewX(30deg);
        cursor: pointer;
        text-align: center;
      }
    }
    .detail-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .label {
        flex: 0 0 140px;
        width: 140px;
        font-size: 16px;
        color: #ffffff;
      }
      .value {
        font-size: 20px;
        flex: 0 0 60px;
        width: 60px;
        font-weight: 700;
        color: rgba(251, 230, 113, 1);
      }
    }
  }
}
.echart-detail-modal {
  width: 420px;
  height: 300px;
  transform: translate(-210px, -120px);
  .money {
    color: rgba(251, 230, 113, 1);
    width: 80px;
    flex: 0 0 80px !important;
  }
  .name {
    width: 100px;
    flex: 0 0 100px !important;
  }
}
</style>
